import React, {Component,Fragment} from 'react';
import Todoitem from "./Todoitem"
class Todolist extends Component {
  //最优先执行的函数叫constructor
  //因为todolist继承了components,super(props)用于这个方面
  constructor(props) {
    super(props);
    this.state = {
      inputValue: 'hhshshshsh',
      list: ["xuexiyingwen","xuexireact"],

    }

  }
  render() {
    return ( 
      <Fragment>
      <input type = "text" value={this.state.inputValue} onChange = {this.handleChange.bind(this)}/ >
      <input type = "button" value = "提交" onClick={this.handleClick.bind(this)}/ >
      <ul>
      {
        this.state.list.map((item,index)=>{
          return(
            <div> <Todoitem item={item} index={index}/>
           {/* <li key={index} onClick={this.handleDelete.bind(this,index)}>{item}</li>*/}
           </div>
           
            )
        })
      }
      </ul>
      </Fragment>
    )
  }
  handleChange(e) {
    this.setState({
      inputValue:e.target.value
    })
  }
  handleClick(){
    let list=[...this.state.list,this.state.inputValue]
    this.setState({
      list:list
    })
  }
  handleDelete(index){
    let list=this.state.list
    list.splice(index,1)
    this.setState({
      list:list
    })

  }
}
export default Todolist;